<!-- 测验记录 -->
<template>
	<z-paging ref="paging" v-model='dataList' v-if="isshow"
	@query='queryList' :hide-empty-view="Boolean(dataList.length)"
		class='content'>
		<view class="bg" slot='top'>
			<Header title='测验记录' :isShowRight="false" @back='back' arrowColor='#000' textColor='#000'></Header>
		</view>
		<view class="contents">
			<view class="cardItem" v-for='(item,index) in dataList' :key='index' @click="goTestResult(item.id)">
				<view class="topBox">
					<view class="time">
						<text>提交时间：</text>
						<view class="">{{item.createTime}}</view>
					</view>
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/rightDown1.png"></image>
				</view>
				<view class="bottomBox">
					<view class="allCenter">
						<view class="firstBox">
							<view class="">{{item.testScore}}</view>
							<text>分</text>
						</view>
						<text>我的得分</text>
					</view>
					<view class="allCenter">
						<view class="secondBox">
							<view class="">{{item.accuracy}}</view>
							<text>%</text>
						</view>
						<text>正确率</text>
					</view>
					<view class="allCenter">
						<view class="thirdBox">{{handlerTime(item.timeConsuming)}}</view>
						<text>用时</text>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import {
		testRecords
	} from '@/apis/apis.js'
	import Header from '@/components/c_header.vue'
	export default {
		components: {
			Header
		},
		data() {
			return {
				id: "",
				dataList: [],
				isshow:false
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.isshow = true
		},
		onHide() {
			this.isshow = false
		},
		methods: {
			queryList(pageNo, pageSize) {
				testRecords({
					pageNum: pageNo,
					pageSize: pageSize,
					resourceId: this.id
				}).then(res => {
					this.$refs.paging.complete(res.data);
				})
			},
			handlerTime(value) {
				let sencond = parseInt(value) // 3600秒等于60分钟等于1小时
				let h = parseInt(sencond / 3600) // 小时数
				let m = parseInt(sencond % 3600 / 60) // 小时剩余的秒数÷60 得到几分钟
				let s = parseInt(sencond % 3600 % 60) // 剩余秒数
				let result = `${h<10?'0'+h:h}:${m<10?'0'+m:m}:${s<10?'0'+s:s}`
				console.log(result)
				return result
			},
			goTestResult(id){
				uni.navigateTo({
					url: `/pages/index/seeAnswer/seeAnswer?id=${id}`
				})
			},
			back() {
				uni.navigateBack()
			}
		},


	}
</script>

<style scoped lang="scss">
	.content {
		background: #f8f8f8;

		.bg {
			background: #fff;
		}

		.contents {
			background: #F8F8F8;
			padding-top: 34rpx;

			.cardItem {
				width: 92%;
				margin: 0 auto;
				margin-bottom: 26rpx;
				background: #FFFFFF;
				box-shadow: 0px 1px 45px 0px rgba(174, 185, 190, 0.2000);
				border-radius: 10rpx;

				.topBox {
					padding: 34rpx 22rpx 28rpx 26rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid #E9E9E9;

					&>image {
						width: 36rpx;
						height: 36rpx;
					}

					.time {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;

						&>text {
							font-weight: bold;
							color: #1A1A1A;
							padding-right: 18rpx;
						}
					}
				}

				.bottomBox {
					display: flex;
					justify-content: space-around;
					align-items: baseline;
					padding: 48rpx 0;

					.allCenter {
						display: flex;
						flex-direction: column;
						align-items: center;
						font-family: DIN Alternate;
						font-weight: bold;

						.firstBox {
							font-size: 60rpx;
							color: #FE7F53;
							display: flex;
							align-items: baseline;

							&>text {
								font-size: 30rpx;
							}
						}

						.secondBox {
							font-size: 60rpx;
							color: #079DDB;
							display: flex;
							align-items: baseline;

							&>text {
								font-size: 30rpx;
							}
						}

						.thirdBox {
							font-size: 50rpx;
							font-weight: bold;
							color: #006569;
						}

						&>text {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #A2A2A2;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
